
<!-- 仓位查询选择页面组件 -->
<template>
    <view class="selectpoput">
        <view class="selectpoput-view">
            <view class="selectpoput-title">
                <!-- 选择输入框 -->
                <view class="function-input1">
                    <!-- 做标题 -->
                    <view class="function-right-title-box">
                       <view class="function-right-title function-right-title1 "><text style="font-size: 20px;margin-left: 4px; "> {{ selecttitle }}</text></view>
                    </view>
                    <input class="ipt" v-model="input1" />
                   
                    <view class="function-input1-buttonview">
                       <view class="function-input1-button  function-input1-button1"><text style="font-size: 20px;margin-left: 4px; ">查询</text></view>
                    </view>
                </view>
            </view>

            <!-- 详细内容 -->
            <view class="detailed">
                <view class="detailed-smas">
                    <view class="detailed-smas-title">
                        <view class="detailed-smas-title1 smas-title1 "><text>仓库编号</text></view>
                        <view class="detailed-smas-title1 smas-title1 "><text>仓库名称</text></view>
                    </view>
                    <view class="detailed-smas-title  title-active" v-for="item in list" @click="clickdlest(item)">
                        <view class="detailed-smas-title1 smas-title2"><text>{{ item.code }}</text></view>
                        <view class="detailed-smas-title1  smas-title2"><text>{{ item.name }}</text></view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, onUnmounted} from "vue"
// 第二步：编写销毁时执行的清理函数
onUnmounted(() => {
  // # 组件销毁时执行的代码
//   clearInterval(timer);  // # 清理定时器（必须做！）
  console.log('组件已销毁，资源已清理');
});

//左边标题
let selecttitle = ref<string>("仓位")
//输入框
let input1 = ref<string>("")


// 模拟数据
let list = [
    {
        name: "仓位1",
        code: "M1001"
    },
    {
        name: "仓位2",
        code: "M1002"
    },
    {
        name: "仓位3",
        code: "M1003"
    },
    {
        name: "仓位4",
        code: "M1004"
    },
    {
        name: "仓位2",
        code: "M1002"
    },
    {
        name: "仓位3",      
        code: "M1003"
    },
    {
        name: "仓位4",  
        code: "M1004"
    }
]
type item={
    name:string,
    code:string
}
//点击列表内容
const clickdlest=(item:item)=>{
    input1.value=item.code
}
</script>

<style scoped>


.selectpoput-view {
    width: 100%;
    height: 100%;
}

.function-input1 {
    padding: 20px 10px;
    display: flex;
    height: 45px;
    background-color: rgb(242, 245, 245);
    border-radius: 20px 20px 20px 20px;
    margin-bottom: 30px;
    justify-content: center;
}




.function-right-title-box {
    width: 60px;
    height: 40px;
    margin-left: 10px;

}
.function-right-title {
    width: 50px;
    height: 40px;
    margin-right: 10px;
    
}

.function-right-title1 {
    font-size: 16px;
    line-height: 38px;

}



.function-input1-buttonview {
    width: 60px;
    height: 40px;
    margin-left: 10px;

}

.function-input1-button {
    width: 50px;
    height: 40px;
    background-color: #F7F3F1;
    border-radius: 10px;
    background-color: dodgerblue;
    line-height: 30px;
    color: #FFFFFF;
}

.function-input1-button1 {
    font-size: 16px;
    line-height: 38px;

}

.detailed {
    width: 100%;
    /* background-color: dodgerblue; */
    display: flex;
    align-items: center;
    justify-content: center;
}

.detailed-smas {
    width: 90%;
    /* height: 20px; */
    background-color: #f5f4f4;
    padding:10px 10px;
    border-radius: 10px;
}

.detailed-smas-title {
    display: flex;
    
}
.title-active{
    &:active { 
        background-color: #f1f1f2; 
        transition: background-color 0.0001s; /* 添加过渡效果，设置过渡时间为 0.1 秒，减少按下显示时间 */
    } 
    /* 按下时变深，类似按钮被按扁 */
}
.smas-title1{
    font-size: 20px;
}
.smas-title2{
    font-size: 18px;
    padding: 6px 0px;
}
.detailed-smas-title1 {
    width: 50%;

    display: flex;
    align-items: center;
    justify-content: center;
}
.ipt {
    /* 原代码保持不变 */
    height: 40px;
    width: 224px;
    font-size: 18px;
    
    /* 新增边框样式 - 三要素缺一不可 */
    border: 2px solid #545654; /* # 边框厚度:2像素 | 样式:实线 | 颜色:蓝色 */
    border-radius: 20px;        /* # 圆角半径:8像素 */
  padding: 0px 10px;
  transition: border-color 0.3s;  /* # 添加过渡动画，使颜色变化更平滑 */
}

</style>
